<template>
  <nut-fixednav :position="{top:'400px' }" type="right" v-model:visible="myActive">
    <template v-slot:list>
      <ul class="nut-fixednav__list">
        <li class="nut-fixednav__list-item">
          <router-link to="/">Home</router-link>
        </li>
        <li class="nut-fixednav__list-item">
          <router-link to="/about">About</router-link>
        </li>
        <li class="nut-fixednav__list-item">3</li>
      </ul>
    </template>
    <template v-slot:btn>
      <nut-icon name="retweet" color="#fff">
      </nut-icon>
      <span class="text">{{ myActive ? '导航栏开' : '导航栏关' }}</span>
    </template>
  </nut-fixednav>
  <router-view/>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
  name: 'App.',
  setup() {
    const myActive = ref(false);
    const navList = reactive([
      {
        id: 1,
        text: '首页',
        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
      },
      {
        id: 2,
        text: '分类',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
      },
      {
        id: 3,
        text: '购物车',
        num: 2,
        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
      },
      {
        id: 4,
        text: '我的',
        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
      }
    ]);
    return {
      myActive,
      navList
    };
  }
}
</script>

<style lang="scss">
.nut-fixednav.right .nut-fixednav__list {
  top: -15px;
}
#app,body{
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden;
}
</style>
